<template>
  <el-dialog v-dialogDrag :title="title" :close-on-click-modal="false" :visible.sync="open" class="dialogStyleSmall">
    <el-form v-if="open" ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="24">
          <el-form-item label="套餐名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入套餐名称" clearable size="medium" />
          </el-form-item>
          <el-form-item label="备注信息" :span="24">
            <el-input v-model="form.remark" type="textarea" :rows="8" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单权限" size="medium" class="el-tree-wrap">
            <p class="all-expand">
              <span v-if="AddExpand" @click="unFoldAll()"><i class="el-icon-caret-bottom" />全部展开</span>
              <span v-else @click="closeAll()"><i class="el-icon-caret-top" />全部关闭</span>
            </p>
            <div>
              <el-tree
                ref="menu"
                size="medium"
                :data="menuOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                show-checkbox
                node-key="id"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" type="primary" :disabled="btnDisabled" @click="submitForm">保 存</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { selectTreeMenuAll } from '@/api/system/menu'
import { addComTemp, getComTemp, selectTreeById, updateComTemp, checkNameUnique } from '@/api/enterprise/company-temp'
export default {
  name: 'AddDialog',
  components: {},
  data() {
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('名称不能为空'))
      } else {
        const id = this.form.id
        const enterpriseId = this.form.enterpriseId
        const name = value
        checkNameUnique(id, enterpriseId, name).then(res => {
          if (res.data === '1') {
            return callback(new Error('名称已经存在'))
          } else {
            callback()
          }
        })
      }
    }
    return {
      menuOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      btnDisabled: false,
      // 树是否全部展开
      AddExpand: true,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        id: '',
        enterpriseId: '',
        name: '',
        status: '0',
        remark: '',
        menuIds: []
      },
      // 表单校验
      rules: {
        name: [
          { required: true, validator: checkName, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAdd(title, id) {
      this.open = true
      this.title = title
      // 查询部门菜单树
      this.getMenuTree()
      if (id) {
        this.getDetailById(id)
      }
    },
    // 获取部门菜单树
    getMenuTree() {
      selectTreeMenuAll().then(res => {
        if (res) {
          this.menuOptions = res.data
        } else {
          this.msgError(res.message)
        }
      })
    },
    getDetailById(id) {
      getComTemp(id).then(res => {
        if (res) {
          this.form.id = res.data.id
          this.form.enterpriseId = res.data.enterpriseId
          this.form.name = res.data.name
          this.form.status = res.data.status
          this.form.remark = res.data.remark
          this.$nextTick(() => {
            this.selectMenuIdsbyId(this.form.id)
          })
        } else {
          this.msgError(res.message)
        }
      })
    },
    // 全部展开
    unFoldAll() {
      this.AddExpand = false
      const nodes = this.$refs.menu.store.nodesMap
      for (const i in nodes) {
        nodes[i].expanded = true
      }
    },
    // 全部关闭
    closeAll() {
      this.AddExpand = true
      const nodes = this.$refs.menu.store.nodesMap
      for (const i in nodes) {
        nodes[i].expanded = false
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.btnDisabled = false
      // 清空菜单树选择
      this.resetChecked()
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: '',
        enterpriseId: '',
        name: '',
        status: '0',
        remark: '',
        menuIds: []
      }
      this.resetForm('form')
    },
    // 根据模板id查询菜单树
    selectMenuIdsbyId(id) {
      selectTreeById(id).then(res => {
        if (res) {
          this.resetChecked()
          this.treeSelected = res.data
          this.$nextTick(() => {
            this.$refs.menu.setCheckedKeys(this.treeSelected)
          })
        }
      })
    },
    // 清空菜单树
    resetChecked() {
      this.$refs.menu.setCheckedKeys([])
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      const checkedKeys = this.$refs.menu.getHalfCheckedKeys()
      // 半选中的菜单节点
      const halfCheckedKeys = this.$refs.menu.getCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.btnDisabled = true
          this.form.menuIds = this.getMenuAllCheckedKeys()
          if (this.form.id) {
            if (this.form.menuIds.length !== 0) {
              updateComTemp(this.form).then(res => {
                if (res) {
                  this.msgSuccess('修改成功')
                  this.cancel()
                  this.$parent.getList()
                } else {
                  this.msgError(res.message)
                  this.btnDisabled = false
                }
              })
            } else {
              this.msgError('菜单权限为必选项！')
              this.btnDisabled = false
            }
          } else {
            if (this.form.menuIds.length !== 0) {
              const form = this.form
              addComTemp(form).then(res => {
                if (res) {
                  this.msgSuccess('新增成功')
                  this.cancel()
                  this.$parent.getList()
                } else {
                  this.msgError(res.message)
                  this.btnDisabled = false
                }
              })
            } else {
              this.msgError('菜单权限为必选项！')
              this.btnDisabled = false
            }
          }
        }
      })
    }
  }
}
</script>

